import React from "react"
import store from '../../store'
import { addAlignment, AlignmentView } from "open-vector-editor"
import { setupOptions, setParamsIfNecessary } from "./utils/setupOptions"
// import { Button } from 'antd'
// import pairwiseAlignment from "./json/pairwiseAlignment.json"
// import msaAlignment from "./json/msaAlignment.json"

// 基本配置
const defaultState = {
  // alignmentDataId: pairwiseAlignment.id,
  // alignmentDataId: msaAlignment.id,
  showDemoOptions: true,
  forceHeightMode: false,
  isFullyZoomedOut: false,
  setMinimapLaneHeight: false,
  setMinimapLaneSpacing: false,
  setAlignmentName: false,
  noClickDragHandlers: false,
  hasTemplate: true,
  noVisibilityOptions: false,
  setTickSpacing: false
}

export default class AlignmentComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log('React -> 序列比对组件[props] :>>', props);
    defaultState.alignmentDataId = this.props.seqAlignmentData.id
    setupOptions({ that: this, defaultState, props });
  }

  componentDidUpdate () {
    setParamsIfNecessary({ that: this, defaultState });
  }

  componentDidMount () {
    addAlignment(store, this.props.seqAlignmentData);
  }

  render () {
    const { tabKey, activeKey } = this.props
    return (
      tabKey !== activeKey ?
        <span>加载中...</span> :
        <AlignmentView
          style={{
            ...(this.state.showDemoOptions && { paddingLeft: 0 }),
            height: 'calc(100vh - 180px)',
            // background: '#efefef'
          }}
          {...{
            ...(this.state.addSelectionRightClickOptions && {
              additionalSelectionLayerRightClickedOptions: () => [
                {
                  text: "我是右键自定义菜单",
                  className: "createDiversityRegion",
                  onClick: () => window.toastr.success("You did it!")
                }
              ]
            }),
            ...(this.state.overrideSelectionRightClick && {
              selectionLayerRightClicked: () => {
                window.toastr.success("lezzz goooo!");
              }
            }),
            // additionalTopEl: <Button>button</Button>,
            id: this.state.alignmentDataId,
            height: this.state.forceHeightMode ? 500 : undefined,
            isFullyZoomedOut: this.state.isFullyZoomedOut,
            minimapLaneHeight: this.state.setMinimapLaneHeight ? 13 : undefined,
            minimapLaneSpacing: this.state.setMinimapLaneSpacing
              ? 3
              : undefined,
            alignmentName: this.state.setAlignmentName
              ? "Ref Seq Name"
              : "Alignment Name Placeholder",
            noClickDragHandlers: this.state.noClickDragHandlers,
            hasTemplate: this.state.hasTemplate,
            noVisibilityOptions: this.state.noVisibilityOptions,
            linearViewOptions: {
              ...(this.state.setTickSpacing && { tickSpacing: 10 })
            }
          }}
        />
    )
  }
}
